<template>
	<view class="wrap" v-show="!loading">
		<view class="work" v-for="(item, index) in list" :key="index">
			<view class="text f32 fweib" v-if="item.resource.length>0">{{item.name}}</view>
			<view class="box d-c-c" v-for="(resource, rIndex) in item.resource" :key="rIndex">
				<view class="circle d-c-c">
					<view class="circle1"></view>
				</view>
				<view class="box1 d-c-c" @click="readResource(resource.file_path)">
					<image src="/static/index1/39.png" mode="widthFix" v-if="item.type=='ZTMH'"></image>
					<image src="/static/index1/40.png" mode="widthFix" v-if="item.type=='MXB'"></image>
					<image src="/static/index1/41.png" mode="widthFix" v-if="item.type=='SJLX'"></image>
					<image src="/static/index1/42.png" mode="widthFix" v-if="item.type=='TZTS'"></image>
					<view class="box1-1 f32">{{resource.resource_name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				bookId: 0,
				list: [],
			}
		},
		onLoad(options) {
			this.bookId = options.bookId || 0
			this.getList()
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中',
				})
				this.$u.post(this.$u.api.resource, {
					bookId: this.bookId,
				}).then((res) => {
					uni.hideLoading()
					this.loading = false
					this.list = res.data
				}).catch((err) => {
					uni.hideLoading()
					this.loading = false
					console.log(err)
				})
			},
			// 阅读文件
			readResource(url) {
				uni.downloadFile({
					url: url,
					success: function (res) {
						var filePath = res.tempFilePath
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function (res) {
								console.log('打开文档成功')
							}
						})
					}
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.wrap {
		padding: 0 30rpx;
	}

	.work{
		margin-bottom: 40rpx;

		.circle{
			width: 30rpx;
			height: 30rpx;
			background: rgba(75,176,255,0.5);
			border-radius: 50%;
			margin: 0 30rpx;
			.circle1{
				width: 15rpx;
				height: 15rpx;
				background: #4BB0FF;
				border-radius: 50%;
			}
		}
		.box{
			margin-top: 30rpx;
			
			.box1{
				flex: 1;
				background: #4BB0FF;
				border-radius: 20rpx;
				padding: 30rpx 50rpx;
				cursor: pointer;
				image{
					width: 60rpx;
					margin-right: 24rpx;
				}
				
				.box1-1{
					flex: 1;
					color: #fff;
				}
			}
			
		}
	}
</style>
